<template>
	<view>
		<video :src="src" :autoplay='true' :controls="false" :show-play-btn="false" :style="{ height: height+'px',width: width +'px '}"
		 :loop="true" :enable-progress-gesture="false" :id="`video_${src}`" ref="`video_${src}`" class="video">
			<cover-image class="button2 view" src="/static/image/l3.png"></cover-image>
			<cover-image class="button3 view" @click="tapGift" src="/static/image/l4.png"></cover-image>
			<cover-image class="button4 view" src="/static/image/l5.png"></cover-image>
		</video>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				src: '',
				height: '',
				width: '',
				lrid: 0
			}
		},
		onLoad(option) {
			than = this;
			than.src = option.pull_address
			than.lrid = option.lrid
			uni.getSystemInfo({
				success: function(res) {
					than.height = res.windowHeight;
					than.width = res.windowWidth;
				}
			})
			than.post('api/live_video/listOfGift', null, function(data) {
				getApp().globalData.gift = [];
				getApp().globalData.gift = data;
			})
			uni.$on('setReward', (data) => {
				than.reward(data.data);
			})
		},
		onUnload() {
			uni.$off('setReward');
		},
		methods: {
			tapGift() {
				uni.getSubNVueById('gift').show('slide-in-bottom', 200, () => {});
			},
			toBack() {
				uni.navigateBack()
			},
			reward(json) {
				than.post('api/live_video/reward', {
					gid: json.gid,
					lrid: than.lrid
				}, function(data) {
					uni.$emit('getReward', {
						data: json,
					});
				})
			}
		}
	}
</script>

<style lang="less">
	.video {
		line-height: 1;
	}

	.controls-play {
		left: 50rpx;
	}

	.img {
		position: absolute;
	}

	.back {
		left: 24rpx;
		top: 45rpx;
		width: 30rpx;
		height: 45rpx;
	}

	.navbar {
		position: absolute;
		z-index: 999999;
		top: 0;
		height: 100rpx;
		width: 100%;
	}


	.view {
		z-index: 999999;
		position: absolute;
	}

	.button2 {
		width: 80rpx;
		height: 80rpx;
		bottom: 53rpx;
		right: 220rpx;
	}

	.button3 {
		width: 80rpx;
		height: 80rpx;
		bottom: 53rpx;
		right: 128rpx;
	}

	.button4 {
		width: 80rpx;
		height: 80rpx;
		bottom: 53rpx;
		right: 36rpx;
	}
</style>
